<?php
if (!isset($_S_PICKER_GLOBAL_INCLUDED)) {
    $_S_PICKER_GLOBAL_INCLUDED = true;
    ?>
    <style>
        .picker-container .picker-titles-container {
            border: solid 1px #e6e6e6;
            background-color: #fff;
            border-radius: 2px;
            padding: 10px;
            line-height: 20px;
            cursor: pointer;
        }

        .picker-container .picker-hint {
            color: #ccc;
        }

        .picker-dialog .picker-table {
            padding: 10px;
            width: calc(100% - 20px);
        }

        .picker-dialog .picker-table iframe {
            width: 100%;
            border: none;
        }
    </style>
    <script>
        g.picker = {
            getTitleFields: function (id) {
                var titleFields = $("#" + id).attr("data-titleField");
                return titleFields.split(",");
            },
            getKeyFields: function (id) {
                var keyFields = $("#" + id).attr("data-keyField");
                return keyFields.split(",");
            },
            contains: function (id, row) {
                var keyFields = g.picker.getKeyFields(id);
                var value = g.picker.get(id);

                for (var i = 0; i < value.length; i++) {
                    var item = value[i];
                    var match = true;
                    $.each(keyFields, function (idx, field) {
                        if (item[field] != row[field]) {
                            match = false;
                        }
                    });
                    if (match) {
                        return true;
                    }
                }

                return false;
            },
            get: function (id) {
                return $("#" + id + " .picker-value").val();
            },
            set: function (id, value) {
                if (typeof value == 'string') {
                    value = eval("(" + value + ")");
                }
                $("#" + id + " .picker-value").val(JSON.stringify(value));

                $("#" + id + " .picker-titles").html("");
                if (value.length == 0) {
                    $("#" + id + " .picker-hint").show();
                } else {
                    $("#" + id + " .picker-hint").hide();
                    var titleFields = g.picker.getTitleFields(id);
                    $.each(value, function () {
                        //这边根据titleField设置的值来显示哪个字段
                        var titles = [];
                        var that = this;
                        $.each(titleFields, function (idx, field) {
                            titles.push(that[field]);
                        });
                        var htm = "<div class='picker-title'>" + titles.join(", ") + "</div>";
                        $("#" + id + " .picker-titles").append(htm);
                    });
                }
            },
            showDialog: function (id, callback) {
                var height = (window.frameElement ? $(window.frameElement).height() : $(window).height()) - 50;
                if (height > 600) {
                    height = 600;
                }
                var windowWidth = (window.frameElement ? $(window.frameElement).width() : $(window).width()) - 50;
                var width = windowWidth * 0.8;
                if (width < 600) {
                    width = windowWidth;
                }

                var $dialog = $("#pickerDialog" + id);
                layer.open({
                    type: 1,
                    title: '请选择',
                    content: $dialog,
                    area: [width + 'px', height + "px"],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        //TODO 这边获取的是当前页的选中结果，需要把所有页的结果获取过来。
                        var tableTools = $dialog.find(".picker-table iframe")[0].contentWindow.__table_config.tableTools;
                        var checkStatus = tableTools.getCheckStatus();
                        var rows = checkStatus.data;

                        var keyFields = g.picker.getKeyFields(id);
                        var titleFields = g.picker.getTitleFields(id);
                        var checkedDatas = [];
                        $.each(rows, function (idx, row) {
                            var checkedData = {};
                            $.each(keyFields, function (i, field) {
                                checkedData[field] = row[field];
                            });
                            $.each(titleFields, function (i, field) {
                                checkedData[field] = row[field];
                            });
                            checkedDatas.push(checkedData);
                        });

                        //设置picker-value的值
                        g.picker.set(id, checkedDatas);

                        //调用回调
                        typeof callback == 'function' && callback(checkedDatas, rows);

                        layer.close(index);
                        return true;
                    }
                });
            }
        };
    </script>
    <?php
}
?>

<div class="<?php echo $__s_picker_class; ?> picker-container" id="<?php echo $__s_picker_id; ?>"
     data-keyField="<?php echo $__s_picker_keyField; ?>"
     data-titleField="<?php echo $__s_picker_titleField; ?>"
     data-bean="<?php echo $__s_picker_bean; ?>">
    <div class="picker-titles-container">
        <div class="picker-titles">
        </div>
        <div class="picker-hint"><?php echo $__s_picker_hint; ?></div>
    </div>
    <input name="<?php echo $__s_picker_name; ?>" class="picker-value" type="hidden"/>
</div>

<div class="<?php echo $__s_picker_class; ?> picker-dialog" id="pickerDialog<?php echo $__s_picker_id; ?>"
     style="display: none;">
    <div class="picker-table">
        <iframe class="auto-height-iframe" data-delta-height="80"
                src="/<?php echo $__s_picker_bean; ?>/picker?__pickerId=<?php echo $__s_picker_id; ?>&___multi=<?php echo $__s_picker_multi ? 1 : 0; ?>"></iframe>
    </div>
</div>

<script>
    $(document).ready(function () {
        // 首先将弹出框对应的div移动到最外层，否则有的时候会弹不出来
        document.body.appendChild(document.getElementById("pickerDialog<?php echo $__s_picker_id; ?>"));

        var $container = $("#<?php echo $__s_picker_id; ?>");
        var $titlesContainer = $container.find(".picker-titles-container");

        //点击事件
        $titlesContainer.click(function () {
            g.picker.showDialog("<?php echo $__s_picker_id; ?>");
        });
    });
</script>